<template>
  <guat-page-layout title="批量修改">
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '筛选',
            internal: $config.$button.PLO,
            permission: $permission.POINT_MULTIPLE_SEARCH,
            onClick: () => setDrawerVisible(true),
          },
          {
            text: '创建批量修改',
            internal: $config.$button.PLR,
            permission: $permission.POINT_MULTIPLE_ADD,
            onClick: () => $router.push({ name: RouteName.POINT_CREATE_MULTIPLE }),
          },
        ]"
      />
    </template>
    <guat-multiple-table />
    <guat-search-drawer title="筛选">
      <guat-search-form />
    </guat-search-drawer>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createTableColumns } from "../table-config";
import { RouteName } from "@/constant/route";
import { pointMultipleSearchForm } from "../form-config";
import { multipleChangeList } from "../data";

const [GuatSearchDrawer, { setDrawerVisible }] = useDrawer();
const [GuatSearchForm] = useForm(pointMultipleSearchForm);
const [GuatMultipleTable, { setTableData }] = useTable(
  createTableColumns({
    del: () =>
      warning({
        title: "删除确认",
        content: "请确认是否要删除",
        onOk: onConfirmDelete,
      }),
    redo: () =>
      warning({
        title: "撤销确认",
        content: "请确认是否要撤销",
        onOk: onConfirmRedo,
      }),
  })
);
const { success } = useMessage();
const { warning } = useModalNotice();

function onConfirmDelete() {
  success("删除成功");
}

function onConfirmRedo() {
  success("撤回成功");
}

onMounted(() => {
  setTableData(multipleChangeList);
});
</script>

<style scoped></style>
